<!-- 表格组件 -->
<script lang="tsx" setup>
import { toRaw } from "vue";

import type { TableColumnOption } from "@/components/table-widget/table-widget.vue";
import TableWidget from "@/components/table-widget/table-widget.vue";
import { jeecgBootSysUserDeleteUsingDelete } from "@/genapi/system";

import { injectState } from "../state";

defineOptions({ name: "Sheet" });

const {
	selectedList,
	tableRef,
	detailDialogRef,
	page: { records, isLoading, execute },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());

const onAudit = async (row: (typeof records.value)[0]) => {
	await ElMessageBox.confirm(`确认删除吗？`, {
		type: "info",
		title: "提示",
	});
	await jeecgBootSysUserDeleteUsingDelete({
		params: {
			id: row.id!,
		},
	});
	ElMessage.success("处理成功");
	await execute();
};

const columns: TableColumnOption<(typeof records.value)[0]>[] = [
	{
		type: "selection",
		fixed: "left",
		noExport: true,
	},
	{
		label: "用户名",
		width: "200",
		formatter: (row) => row.realname ?? "-",
	},
	{
		label: "公司名称",
		width: "350",
		formatter: (row) => row.orgName ?? "-",
	},
	{
		label: "营业执照",
		width: "200",
		formatter: (row) => row.businessLicenses ?? "-",
	},
	{
		label: "角色",
		width: "200",
		formatter: (row) => row.role ?? "-",
	},
	{
		label: "联系电话",
		width: "200",
		formatter: (row) => row.phone ?? "-",
	},
	{
		label: "状态",
		width: "100",
		formatter: (row) => {
			if (row.statusText === '正常') {
				return (
					<div
						style={{
							color: "#00B42A",
							height: "26px",
							width: "60px",
							backgroundColor: "#E8FFEA",
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							marginLeft: "4px",
						}}
					>
						<span>正常</span>
					</div>
				);
			} else if (row.statusText === '冻结') {
				return (
					<>
						<div
							style={{
								color: "#007CB4",
								height: "26px",
								width: "60px",
								backgroundColor: "#E0F5FF",
								display: "flex",
								justifyContent: "center",
								alignItems: "center",
								marginLeft: "4px",
							}}
						>
							<span>冻结</span>
						</div>
					</>
				);
			} else if (row.statusText === '未审核') {
				return (
					<>
						<div
							style={{
								color: "#FE4848",
								height: "26px",
								width: "60px",
								backgroundColor: "#FFF2F2",
								display: "flex",
								justifyContent: "center",
								alignItems: "center",
								marginLeft: "4px",
							}}
						>
							<span>未审核</span>
						</div>
					</>
				);
			} else {
				return "--";
			}
		},
	},
  {
		label: "创建时间",
		width: "200",
		formatter: (row) => row.createTime ?? "-",
	},
	{
		label: "操作",
		export: false,
		fixed: "right",
		noExport: true,
		formatter(row) {
			return (
				<>
					<el-button
						size="small"
						type="primary"
						text
						onClick={() => detailDialogRef.value?.trigger("write", row)}
					>
						修改
					</el-button>
					<el-button
						size="small"
						type="primary"
						text
						onClick={() => onAudit(row)}
					>
						删除
					</el-button>
				</>
			);
		},
	},
];
</script>

<template>
	<TableWidget
		fit
		ref="tableRef"
		v-loading="isLoading"
		:data="records"
		:columns="columns"
		h="100%!"
		@selection-change="(rows: any) => (selectedList = toRaw(rows))"
	/>
</template>
<style scoped lang="scss">
.el-table td.el-table__cell div {
	display: flex;
	justify-content: center !important;
}
</style>
